<script setup>
//这是博客详情页
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { classToAll } from "@/hook/universality";
import ViewerImgs from "@/components/Blog/ViewerImgs.vue";
import { marked } from "marked";
import { useBlog } from '@/stores/blog'
import { useContent } from '@/stores/content'
import dayjs from 'dayjs'

const Blog = useBlog() // 用于调用方法
const Content = useContent() // 操作目录
const blog = ref({})     // 用于存储当前blog
const router = useRouter();
const route = useRoute();
const props = defineProps(["blogProp"])

if (props.blogProp) { // 有传参优先
  blog.value = props.blogProp
} else { // 否则用Url参数
  Blog.getBlogsbyId(route.query.id, data => {
    blog.value = data
  })
}

const blogMd = computed(() => {
  if (blog.value.blogType == "md") {
    let md = marked.parse(blog.value.blogContent);

    // 加入目录
    let items = [], anchors = [], types = [], a = []
    var mdDom = document.createElement("div");
    mdDom.innerHTML = md;
    mdDom.querySelectorAll("h1,h2,h3").forEach((el) => {
      if (el.tagName == "H1") a = [el.innerText, el.id, 1]
      else if (el.tagName == "H2") a = [el.innerText, el.id, 2]
      else a = [el.innerText, el.id, 3]
      items.push(a[0])
      anchors.push(a[1])
      types.push(a[2])
    })
    Content.setContent(items, anchors, types)
    return md;
  } else {
    return blog.value.blogContent;
  }
})

let blogImgs = computed(() => {
  // console.log(blog.value.blogData)
  if (!blog.value.blogData) return []
  else return blog.value.blogData.filter((img) => {
    return img.substring(0, 4) == "http";
  });
});
</script>

<template>
  <!-- 这是博客详情页 -->
  <div class="model">
    <!-- {{ blog.blogInfo }} -->
    <div class="in-model">
      <div class="tittle" v-if="blog.blogTittle">
        {{ blog.blogTittle }}
        <span>{{ blog.blogId }}</span>
      </div>
      <div class="info">
        <span class="author" @click="router.push('/user?name=' + blog.blogUsername)">{{ blog.blogUsername }}</span>&nbsp;·
        <span class="date">{{ dayjs(blog.blogTime).format("YY-M-D H:mm") }}</span>&nbsp;·
        <span class="class">{{ classToAll(blog.blogLabel) }}</span>
        <a v-if="blog.blogInfo?.link" :href="blog.blogInfo.link" target="_black">&nbsp;·查看原文</a>
      </div>


      <pre v-if="blog.blogType != 'md'" class="content" v-show="blog.blogTittle !== blog.blogContent"
        v-html="blogMd"></pre>
      <div v-else class="markdown" v-html="blogMd"></div>

      <ViewerImgs v-if="blogImgs.length" :blogImgs="blogImgs" :isBlog="true" />
    </div>
  </div>
</template>

<style scoped lang="less">
.in-model {

  /* 文本框************************* */
  .tittle {
    font-weight: bold;
    font-size: 25px;
    text-align: center;

    /* 超出省略号（单行） */
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;

    span {
      font-size: 10px;
      font-weight: normal;
      color: var(--mini-text-color);
    }
  }

  .content {
    white-space: pre-wrap;
    word-wrap: break-word;

    margin-top: 20px;
    width: 100%;

    /* 超出省略号（多行） */
    display: inline-block;
    -webkit-line-clamp: 4;
    overflow: hidden;
    -webkit-box-orient: inline-axis;
  }

  /* 最下方信息*********************** */
  .info {
    margin-top: 20px;
    font-size: 15px;

    * {
      display: inline-block;
      color: var(--mini-text-color);
      vertical-align: top;
    }

    .author {
      max-width: 40%;
      cursor: pointer;

      /* 超出省略号（单行） */
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
  }

}
</style>

<style lang="less">
@import "../../../public/css/markdown/main.less";
</style>